/**
 * 控制是否展示、折叠左侧侧边栏菜单 以及 当前应用运行在那种状态下
 * ⭐⭐⭐ 该文件不需要进行任何改动 ⭐⭐⭐
 */

import Cookies from 'js-cookie'
import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => ({
    sidebar: {
      // 菜单栏折叠与否的状态
      // 1️⃣ 从 Cookies 中获取 sidebarStatus，sidebarStatus 有两种状态 '0'、'1'
      // 2️⃣ 如果 sidebarStatus 读取成功，则将读取到的值通过 + 进行隐式类型转换
      //    +('1') → 1，!!+1 → true， opened 为 true 展开菜单栏
      //    +('0') → 0，!!+0 → false，opened 为 false 则隐藏菜单栏
      // 3️⃣ 如果 sidebarStatus 读取失败，则将 opened 设置为 true，展开菜单栏
      opened: Cookies.get('sidebarStatus') ? !!+(Cookies.get('sidebarStatus') as string) : true,
      // 折叠的时候的动画设置
      // 📢🔈：
      //  只有❗在移动端访问项目 或 浏览器尺寸缩小到移动端尺寸时❗，withoutAnimation 才会被设置为 true
      // withoutAnimation 会被设置为 true 隐藏侧边栏，隐藏的时候不使用动画效果
      // withoutAnimation 会设置为 false 时，隐藏和展示侧边栏都有通话效果
      withoutAnimation: false
    },
    // 设备状态(PC 还是移动端)
    device: 'desktop'
  }),

  actions: {
    // 点击 Navbar 中的按钮控制左侧菜单的隐藏和展示
    toggleSidebar() {
      this.sidebar.opened = !this.sidebar.opened
      this.sidebar.withoutAnimation = false
      if (this.sidebar.opened) {
        Cookies.set('sidebarStatus', '1')
      } else {
        Cookies.set('sidebarStatus', '0')
      }
    },

    // 根据浏览器的显示宽度的改变决定是否展示和隐藏菜单
    closeSidebar(withoutAnimation: boolean) {
      Cookies.set('sidebarStatus', '0')
      this.sidebar.opened = false
      this.sidebar.withoutAnimation = withoutAnimation
    },

    // 根据浏览器的显示宽度的改变设备状态 (mobile 和 desktop 之间切换)
    toggleDevice(device: string) {
      this.device = device
    }
  }
})
